<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的音乐</title>
    <script src="./js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="shortcut icon" href="./upload/favicon.ico" type="image/x-icon">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./Font/font_3656460_y0s4xhmoak/iconfont.css">
    <link rel="stylesheet" href="./Font/min_index.iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/My_music.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/disembark_index.css">
    <link rel="stylesheet" href="./css/My_su.css">
    <link rel="stylesheet" href="./css/My_music.css">
    <link rel="stylesheet" href="./css/vipopen.css">
</head>

<body>
    <div class="app">
        <!-- 头部 -->
        <header>
            <div class="width">
                <!-- logo -->
                <h1 class="logo">
                    <a href="#">
                        <img class="qqMusic_logo" src="./images/logo.png" alt="">
                    </a>
                </h1>
                <!-- 音乐馆导航栏 -->
                <ul class="header_top_nav">
                    <li class="top_nav_item">
                        <a class=" top_nav_link" href="./index.html" data-id="0">音乐馆</a>
                    </li>
                    <li class="top_nav_item">
                        <a class="top_nav_link bgGreen " href="#" data-id="1">我的音乐</a>
                    </li>
                    <li class="top_nav_item">
                        <a class="top_nav_link" href="./chanpin.html">客户端</a>
                        <img class="vip_tq" src="./images/vip_tq.png" alt="">
                    </li>
                    <li class="top_nav_item">
                        <a class="top_nav_link" href="#">开放平台</a>
                    </li>
                    <li class="top_nav_item">
                        <a class="top_nav_link" href="./vip-index.html" target="_blank">VIP</a>
                    </li>
                </ul>
                <!-- 搜索框 -->
                <div class="header_top_search">
                    <div class="search_input">
                        <input class="search_input_input" placeholder="搜索音乐、MV、歌单、用户" type="text">
                        <button class="search_input_btn">
                            <i class="icon_search sprite iconfont icon-sousuo"></i>
                        </button>
                    </div>
                    <!-- 表单下列的下拉框 -->
                    <div class="search_input_other">
                        <dl class="search_input_other_list">
                            <dt>
                                <span>历史记录</span>
                                <span class="iconfont icon-shanchu " id="shanchu"></span>
                            </dt>
                            <dd class="dd_item">

                            </dd>
                        </dl>

                    </div>
                </div>
                <!-- 点击搜索后会将记录保存在历史记录中 -->
                <script>

                </script>


                <!-- 登录开通vip模块 -->
                <div class="header__opt">
                    <div class="header_top_login">
                        <span class="login_btn"><a href="#" class="top_login__link "><span
                                    class="span_login">登录</span></a></span>
                        <!-- <a href="#" class="userImg top_login__link">
                            <img src="./images/smqq.png" class="smqq" alt="">
                        </a> -->
                        <div class="mod_select mod_select_op">
                            <a class="select__choose select__choose_vip bgGreen" href="#">开通VIP</a>
                            <div class="ffb">
                                <a class="select__choose select__choose_lvzuan  white" href="#">开通绿钻豪华版</a>
                                <a class="select__choose white" href="#">开通付费包</a>
                            </div>
                        </div>

                        <!-- 充值模块 -->
                        <div class="mod_select mod_select_cz">
                            <a class="select__choose_vip chongzhi select__choose" href="#">充值</a>
                            <!-- 购买乐币 -->
                            <div class="sell">
                                <a class="select__choose" href="#">购买乐币</a>
                                <a class="select__choose" href="#">充值饭票</a>
                            </div>
                        </div>
                    </div>
                    <!-- 用户详情 -->
                    <div class="userMore">
                        <!-- 用户头像 -->
                        <div class="userDetail">
                            <div class="userDetail_img"> <img src="./images/smqq.png" alt=""></div>
                            <div class="userDetail_title">叫爹</div><br>
                            <div class="vip_box">
                                <img class="d_vip1" src="./images/d-vip1.png" alt="">
                                <img class="d_vip1" src="./images/d-vip1.png" alt="">
                            </div>
                            <!-- 豪华绿钻 -->
                            <div class="userDetail_item">
                                <div class="userDetail_item_title">
                                    <h3>豪华绿钻版</h3>
                                    <span>开通立即赠送付费音乐包</span>
                                </div>
                                <button class="kaitong">开通</button>
                            </div>
                            <div class="userDetail_item">
                                <div class="userDetail_item_title">
                                    <h3>付费音乐包</h3>
                                    <span>畅享千万包月曲库</span>
                                </div>
                                <button class="kaitong">开通</button>
                            </div>
                            <div class="userDetail_t">评论通知</div>
                            <div class="userDetail_t breakLogin">退出登录</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 登录账号模块 -->
            <div class="login_box">
                <div class="login_nav">
                    <div class="login_cha">X</div>
                    <!-- 登录切换 -->
                    <div class="nav_tab">
                        <a class="active" data-id="0" href="#">QQ登录</a>
                        <a data-id="1" href="#">微信登录</a>
                    </div>
                    <!-- 切换内容部分 -->
                    <div class="nav_content">
                        <!-- qq登录 -->
                        <div class="nav_login active">
                            <!-- 用户名密码登录 -->
                            <div class="login_uname">
                                <h1>密码登录</h1>
                                <p>推荐使用<a href="#">快捷登录</a>，防止盗号。</p>
                                <input class="uname" type="text" name="uname" placeholder="支持qq号/手机/邮箱登录"><span></span>
                                <input class="pwd" type="password" name="pwd" placeholder="请输入密码"><span></span>
                                <button class="qq_btn">登 录</button>
                                <!-- 底部链接 -->
                                <div class="footbtn">
                                    <a href="#">找回密码</a>
                                    <a href="./register.html">注册账号</a>
                                    <a href="#">意见反馈</a>
                                </div>
                            </div>
                            <!-- qq登录 --- 扫码登录 -->
                            <div class="login_erweima" style="display: none;">
                                <h1>扫码登录</h1>
                                <p>使用QQ手机版扫码登录，或点击头像授权登录。</p>
                                <img src="./images/qq_login.png" alt="">
                                <!-- 底部链接 -->
                                <div class="footbtn">
                                    <a class="ln" href="#">用户登录</a>
                                    <a href="./register2.html">注册账号</a>
                                    <a href="#">意见反馈</a>
                                </div>
                            </div>
                            <!-- 右侧部分 -->
                            <div class="login_agree">
                                <p> <a href="#">QQ音乐</a> 将获取以下权限：</p>
                                <ul>
                                    <li>
                                        <input type="checkbox" name="全选" id="all" checked="">
                                        <label class="all" for="all">
                                            <img src="./images/checkbox-unchecked.png" alt="">
                                            &nbsp;全选
                                        </label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="头像" id="head" disabled>
                                        <label class="head" for="head">
                                            <img src="./images/checkbox-checked-disabled.webp" alt="">
                                            &nbsp;使用你的QQ头像、昵称信息
                                        </label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="好友" id="friend" checked="">
                                        <label class="friend" for="friend">
                                            <img src="./images/checkbox-unchecked.png" alt="">
                                            &nbsp;你的QQ好友关系
                                        </label>
                                    </li>
                                </ul>
                                <p>授权即同意<a href="#">服务协议</a>和<a href="#">QQ隐私保护指引</a></p>
                            </div>
                        </div>

                        <!-- 微信登录 -->
                        <div class="nav_login">
                            <!-- 二维码 -->
                            <div class="wx_img">
                                <img src="./images/wx_erweima.jpg" alt="">
                            </div>
                            <!-- 提示信息 -->
                            <div class="wx_title">请使用微信扫描二维码登录“QQ音乐</div>
                            <div class="wx_title2">QQ与微信账号的音乐资产、付费特权不互通</div>
                        </div>
                        <!-- 下载客户端按钮 -->
                        <a class="wx_btn" href="#">下载客户端 体验更多内容</a>
                    </div>
                </div>
            </div>
        </header>
        <!-- 开通VIP -->
        <div class="vip_box_money">
            <!-- 头部标题 -->
            <div class="vip_header">
                <img src="./images/vip_pic.webp" alt="">
                <span>豪华绿钻</span>
                <input type="checkbox" name="head" id="head">&nbsp;&nbsp;
                <label class="head" for="head"></label>
                同意<a href="#">《服务条款》</a>
                <i class="vip_header_close">x</i>
            </div>
            <!-- VIP充值类型 -->
            <div class="vip_type">
                <h3>开通账号： <span class="userName">巴黎铁塔下的纸飞机</span>(用户昵称)</h3>
                <div class="vip_type_money">
                    <!-- 充值类型 -->
                    <div class="money_item type1 active">
                        <div class="spec">
                            <p><span>45</span>元</p>
                            <p>15元/月</p>
                        </div>
                        <p>3个月</p>
                        <i class="active"></i>
                    </div>
                    <div class="money_item type2">
                        <div class="spec">
                            <p><span>90</span>元</p>
                            <p>15元/月</p>
                        </div>
                        <p>6个月</p>
                        <i></i>
                    </div>
                    <div class="money_item type3">
                        <div class="spec">
                            <p><span>168</span>元</p>
                            <p>14元/月</p>
                        </div>
                        <p>12个月</p>
                        <i></i>
                    </div>
                    <div class="money_item type4">
                        <div class="spec">
                            <p><span>15</span>元</p>
                            <p>15元/月</p>
                        </div>
                        <div class="custom">
                            <div class="btn_sub">
                                <span class="btn_img"></span>
                            </div>
                            <div class="month"><span>1</span>个月</div>
                            <div class="btn_add">
                                <div class="btn_img"></div>
                            </div>
                        </div>
                        <i></i>
                    </div>
                </div>
            </div>
            <!-- 支付方式 -->
            <div class="vip_pay">
                <h3>支付方式：</h3>
                <div class="vip_pay_type">
                    <div class="paytype qqpay active">qq支付<i class="active"></i></div>
                    <div class="paytype wxpay">微信支付<i></i></div>
                </div>
                <!-- 支付二维码 -->
                <div class="vip_pay_pic">
                    <p><span>手机qq</span>扫码，支付<i>45</i>元</p>
                    <div class="pay_img">
                        <img src="./images/wx_erweima.jpg" alt="">
                    </div>
                </div>
            </div>
            <!-- 遮罩层 -->
            <div class="vip_content"></div>
        </div>
        <script src="./js/vipopen.js"></script>
        <!-- 我的音乐 -->
        <div class="content" data-id="1">
            <!-- 没有登录状态 -->
            <div class="mod_profile_unlogin">
                <div class="width">
                    <h2 class="section_inner_title"></h2>
                    <div class="profile_unlogin__desc"></div>
                    <button class="my_music_login">立即登录</button>
                </div>
            </div>
        </div>
        <!-- 成功页面 -->
        <div class="content" data-id="2">
            <!-- 用户页面 -->
            <div class="user_app">
                <!-- 背景部分 -->
                <div class="mod_profile">
                    <!-- 版心 -->
                    <div class="section_inner  width">
                        <div class="userLogo_more">
                            <div class="user_pic">
                                <img src="	https://thirdqq.qlogo.cn/g?b=sdk&k=uVZ7MXKEjeNjxqHS0Ih9Lw&s=140&t=1604983555"
                                    alt="乖乖">
                            </div>
                            <h1 class="profile__tit">
                                <span>♚ Jason</span>
                                <a href="#">
                                    <img src="	https://y.qq.com/music/icon/v1/mac/svip_g@2x.png?max_age=2592000" alt="">
                                </a>
                            </h1>
                            <!-- 关注  粉丝 -->
                            <ul class="mod_user_statistic  ">
                                <li class="user_statistic__item">
                                    <a href="#">
                                        <strong class="user_statistic__number">0</strong>
                                        <span class="user_statistic__tit">关注</span>
                                    </a>
                                </li>
                                <li class="user_statistic__item">
                                    <a href="#">
                                        <strong class="user_statistic__number">13</strong>
                                        <span class="user_statistic__tit">粉丝</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- 我的歌单 -->
                        <div class="main_profile ">
                            <div class="mod_tab ">
                                <a href="#" class="mod_tab__item  active_color">我喜欢</a>
                                <a href="#" class="mod_tab__item">我创建的歌曲</a>
                                <a href="#" class="mod_tab__item">关注</a>
                                <a href="#" class="mod_tab__item">粉丝</a>
                                <a href="#" class="mod_tab__item">我上传的视频</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 主体内容 -->
                <div class="top_box   width">
                    <a href="#" class="top_box_item">歌曲 <span>4</span> </a>
                    <a href="#" class="top_box_item">歌单 <span>0</span> </a>
                    <a href="#" class="top_box_item">专辑 <span>0</span> </a>
                    <a href="#" class="top_box_item">视频 <span>0</span> </a>
                </div>
                <div class="profile_cont  width">
                    <div class="mod_songlist_toolbar">
                        <a href="#" class="active">
                            <i class="iconfont icon-24gl-play"></i>
                            <span>全部播放</span>
                        </a>
                        <a href="#">
                            <i class="iconfont icon-tianjia"></i>
                            <span>添加</span>
                        </a>
                        <a href="#">
                            <i class="iconfont icon-xiazai"></i>
                            <span>下载</span>
                        </a>
                        <a href="#">
                            <i class="iconfonticon  icon-icon-piliangcaozuo"></i>
                            <span>批量操作</span>
                        </a>
                    </div>
                    <!-- 歌单部分 -->
                    <div class="mod_songlist ">
                        <table>
                            <tr class="table_tr" style="text-align: left;">
                                <th></th>
                                <th>歌手</th>
                                <th>歌曲</th>
                                <th>专辑</th>
                                <th>时长</th>
                            </tr>
                            <!-- 歌曲数量 -->
                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>1</td>
                                    <td class="sing_op">
                                        <a href="#" class="songlist__songname">决战斗室
                                            <div class="mod_list_menu">
                                                <i class="iconfont icon-bofang "></i>
                                                <i class="iconfont  icon-shoucang"></i>
                                                <i class="iconfont  icon-fenxiang"></i>
                                            </div>
                                        </a>
                                    </td>
                                    <td><a href="#">潘玮柏</a></td>
                                    <td><a href="#">高手</a></td>
                                    <td>03:45</td>
                                </tr>
                            </div>
                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>2</td>
                                    <td class="sing_op">
                                        <a href="#">天台月光
                                            <div class="mod_list_menu">
                                                <i class="iconfont icon-bofang "></i>
                                                <i class="iconfont  icon-shoucang"></i>
                                                <i class="iconfont  icon-fenxiang"></i>
                                            </div>
                                        </a>
                                    </td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">天台</a></td>
                                    <td>05:45</td>
                                </tr>
                            </div>
                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>3</td>
                                    <td class="sing_op">
                                        <a href="#">海阔天空</a>
                                    </td>
                                    <td><a href="#">张学友</a></td>
                                    <td><a href="#">海阔天空</a></td>
                                    <td>06:46</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>4</td>
                                    <td class="sing_op">
                                        <a href="#">预谋</a>
                                    </td>
                                    <td><a href="#">陈惠妹</a></td>
                                    <td><a href="#">预谋</a></td>
                                    <td>02:46</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>5</td>
                                    <td class="sing_op">
                                        <a href="#">甜蜜蜜</a>
                                    </td>
                                    <td><a href="#">徐良</a></td>
                                    <td><a href="#">甜蜜蜜</a></td>
                                    <td>01:30</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>6</td>
                                    <td class="sing_op">
                                        <a href="#">小三</a>
                                    </td>
                                    <td><a href="#">陈学友</a></td>
                                    <td><a href="#">小三</a></td>
                                    <td>02:34</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>7</td>
                                    <td class="sing_op">
                                        <a href="#">小三</a>
                                    </td>
                                    <td><a href="#">陈学友</a></td>
                                    <td><a href="#">小三</a></td>
                                    <td>02:34</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>8</td>
                                    <td class="sing_op">
                                        <a href="#">别样生活</a>
                                    </td>
                                    <td><a href="#">雷芳</a></td>
                                    <td><a href="#">别样生活</a></td>
                                    <td>02:34</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>9</td>
                                    <td class="sing_op">
                                        <a href="#">冬季校园</a>
                                    </td>
                                    <td><a href="#">李晓东</a></td>
                                    <td><a href="#">冬季校园</a></td>
                                    <td>02:04</td>
                                </tr>
                            </div>

                            <div class="sing_num">
                                <tr class="table_tr">
                                    <td>10</td>
                                    <td class="sing_op">
                                        <a href="#">得不到的人</a>
                                    </td>
                                    <td><a href="#">于洋</a></td>
                                    <td><a href="#">得不到的人</a></td>
                                    <td>02:10</td>
                                </tr>
                            </div>
                        </table>

                    </div>
                    <!-- 立即下载模块 -->
                    <div class="page_box">
                        <p class="client_guide__txt">查看更多内容，请下载客户端</p>
                        <a href="#" class="client_guide__btn">立即下载</a>
                    </div>
                </div>
            </div>
        </div>
        <script>

        </script>
        <!-- 底部 -->
        <footer class="footer">
            <div class="width">
                <div class="footer_info">
                    <!-- 下载模块 -->
                    <div class="footer_download">
                        <h3 class="footer_title">下载QQ音乐客户端</h3>
                        <ul class="footer_download_list">
                            <li>
                                <a href="#">
                                    <i class="icon_pc"></i>
                                    pc版
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_mac"></i>
                                    Mac版
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_android"></i>
                                    Android版
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_iphone"></i>
                                    iphone版
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 特色产品 -->
                    <div class="footer_product">
                        <h3 class="footer_title">特色产品</h3>
                        <ul class="footer_product_list clearflex">
                            <li>
                                <a href="#">
                                    <i class="icon_kg"></i>
                                    全民k歌
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_yx"></i>
                                    银河音效
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_play"></i>
                                    Qplay
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon_banlv"></i>
                                    Fan直播伴侣
                                </a>
                            </li>
                            <li><a href="#">车载互联</a></li>
                            <li><a href="#">QQ演出</a></li>
                        </ul>
                    </div>
                    <!-- 合作链接 -->
                    <div class="footer_link clearflex">
                        <h3 class="footer_title">合作链接</h3>
                        <ul>
                            <li>CJ ENM</li>
                            <li>最新版qq</li>
                            <li>qq浏览器</li>
                            <li>企鹅Fm</li>
                            <li>酷我音乐</li>
                            <li>腾讯视频</li>
                            <li>腾讯社交公告</li>
                            <li>腾讯微云</li>
                            <li>只能电视网</li>
                            <li>酷狗听书</li>
                            <li>手机qq空间</li>
                            <li>电脑管家</li>
                            <li>腾讯云</li>
                            <li>当贝市场</li>
                        </ul>
                    </div>
                    <!-- 合作链接完 -->
                    <!-- 开放平台 -->
                    <div class="footer_platform clearflex">
                        <h3 class="footer_title">开放平台</h3>
                        <ul>
                            <li>
                                <a href="#">QQ音乐开放平台</a>
                            </li>
                            <li>
                                <a href="#">腾讯音乐人</a>
                            </li>
                            <li>
                                <a href="#">音乐堆</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 开放平台完 -->
                    <!-- TME集团官网 -->
                    <div class="footer_group">
                        <h3 class="footer_title">TME集团官网</h3>
                        <ul>
                            <li>
                                <a href="#">腾讯音乐</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 底部 -->
                <div class="footer_copyright">
                    <p>
                        <a href="#">关于腾讯</a>|
                        <a href="#">About Tencent</a>|
                        <a href="#">服务条款</a>|
                        <a href="#">用户服务协议</a>|
                        <a href="#">隐私政策</a>|
                        <a href="#">权利声明</a>|
                        <a href="#">广告服务</a>|
                        <a href="#">腾讯招聘</a>|
                        <a href="#">客服中心</a>|
                        <a href="#">网站导航</a>|
                        <a href="#">举报中心</a>|
                    </p>
                    <p>
                        Copyright © 1998 - 2022 Tencent. All Rights Reserved.
                    </p>
                    <p><a href="#">腾讯公司版权所有</a> ｜<a href="#">营业执照</a> ｜ <a href="#">网络文化经营许可证：粤网文[2020]3396-195号</a>
                        ｜<a href="#">客服电话：4006016666</a> ｜<a href="#">违法与不良信息举报邮箱：tme_musicjubao@tencentmusic.com</a>
                    </p>
                </div>
                <div class="gd">
                    <ul>
                        <li><a href="#" class="iconfont icon-shangjiantou"></a></li>
                        <li><a href="#">举报</a></li>
                        <li><a href="#">反馈</a></li>
                        <li><a href="#" class="iconfont icon-65zanting"></a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>
    <!-- app完 -->
    <!-- 登录注册js -->
    <script src="./js/login.js"></script>
    <script src="./js/Mymucis.js"></script>
    <script src="./js/vipopen.js"></script>
</body>

</html>